<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="${host_url}/css/app/common_1.css">
<link rel="stylesheet" href="${host_url}/css/app/swiper.min.css">
<link rel="stylesheet"  href="${host_url}/css/app/schoolIndex.css">
<link rel="stylesheet"  href="${host_url}/css/app/dropload.css">

<script type="text/javascript" src="${host_url}/js/app/jquery.min.js"></script>
<script src="${host_url}/js/app/dropload.min.js"></script>
<script src="${host_url}/js/app/swiper.min.js"></script>
<title>友米商学院</title>
<style type="text/css">
	body{width:100%;margin:0;word-wrap:break-word;}
	img{width:100%;}
	</style>
	
<script type="text/javascript">	
$(function(){
	
    <c:if test="${'ios'==os}">
    window.webkit.messageHandlers.ios_show_close.postMessage('');
    window.webkit.messageHandlers.ios_hide_share.postMessage('');
    </c:if> 
});
function fn_gettingStarted(first_cat_id,cat_name){
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${gettingStarted_url}?first_cat_id='+first_cat_id+':::isRefresh->YES:::webTitle->'+cat_name);
}
function fn_courseDetail(id){
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${courseDetail_url}?id='+id+':::isRefresh->YES:::webTitle->课程详情');
}
</script>
</head>
<body>
	<div class="main">
		<div class="swiper-container">
			<div class="swiper-wrapper">
			  <div class="swiper-slide"><img src="${host_url}/img/app/banner_1.jpg" alt=""></div>
			  <div class="swiper-slide"><img src="${host_url}/img/app/banner_1.jpg" alt=""></div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
		<ul class="menu-group-center">
			 <c:forEach items="${catList}" var="cat">
			 <c:if test="${'ios'==os}">
			 	<li onclick="fn_gettingStarted('${cat.id}','${cat.name}')">
			 </c:if>
	    	 <c:if test="${'android'==os}">
	    	 	<li onclick="android.startUrl('${cat.name}','${gettingStarted_url}?first_cat_id=${cat.id }')">
	    	 </c:if>
			 		<img src="${cat.img}" alt="" >${cat.name}
			 	</li>
			 </c:forEach>
			<!-- <li><img src="/img/app/school_icon_1.png" alt="">了解友米乐</li>
			<li><img src="/img/app/school_icon_2.png" alt="">新手入门</li>
			<li><img src="/img/app/school_icon_3.png" alt="" style="width:30px;">高手进阶</li>
			<li><img src="/img/app/school_icon_4.png" alt="">经验分享</li>
			<li><img src="/img/app/school_icon_5.png" alt="">友米素材</li> -->
		</ul>
		<!-- <div class="plate">
			<h6>新手课程</h6>
			<div class="flex-layout">
				<div>
					<img src="/img/app/content_img_1.jpg" alt="">
					<p class="two-spot">友米乐操作指南——简单三步</p>
				</div>
				<div>
					<img src="/img/app/content_img_2.jpg" alt="">
					<p class="two-spot">友米乐操作指南——简单三步</p>
				</div>
				<div>
					<img src="/img/app/content_img_2.jpg" alt="">
					<p class="two-spot">友米乐操作指南——简单三步</p>
				</div>
				<div>
					<img src="/img/app/content_img_2.jpg" alt="">
					<p class="two-spot">友米乐操作指南——简单三步</p>
				</div>
				<div>
					<img src="/img/app/content_img_2.jpg" alt="">
					<p class="two-spot">友米乐操作指南——简单三步</p>
				</div>
			</div>
		</div> -->
		<div class="list" id="clist">
			<h6>最近更新</h6>
			<div id="c_content">
				<c:import url="/v2/college/courseItem?page_index=1"></c:import>
			</div>
		</div>
	</div>
<script>
	var swiper = new Swiper('.swiper-container', {
		spaceBetween: 0,
		centeredSlides: true,
		loop: true,
		autoplay: {
		delay: 2500,
		disableOnInteraction: false,
	},
		pagination: {
		el: '.swiper-pagination',
		clickable: true,
		}
	});
	/*  页数 */
	var page_index = 2;
    /* dropload 加载分页 */
    loadPagination("clist",page_index);
	function loadPagination(div_id, page){
		$('#'+div_id).dropload({
	        scrollArea : window,
	        loadDownFn : function(me){
	            $.ajax({
	                type: 'get',
	                url: 'courseItem?page_index='+page,
	                dataType: 'text',
	                beforeSend: function(request) {
	    				request.setRequestHeader("AUTHORIZATION","${token}");
	    				request.setRequestHeader("SECRET","${memberId}");
	    				request.setRequestHeader("OS","${os}");
	    				request.setRequestHeader("PAGE","${page}");
	    			 }, 
	                contentType:"application/x-www-form-urlencoded; charset=UTF-8",
	                success: function(msg){
	                    if($.trim(msg)){
	                		page++;
	                    	$("#c_content").append(msg);
	                    	me.resetload();
	                   	/*  如果没有数据 */
	                    } else{
	                        	/*  锁定 */
	                        me.lock();
	                        	/*  无数据 */
	                        me.noData();
		                    /* $("#"+div_id+" .dropload-load").parent().remove(); */
	                    } 
	                },
		                error: function(xhr, type){
	                    	/*  即使加载出错，也得重置 */
	                    me.resetload();
	                } 
	            });
	        }
	    });
	}  
</script>
</body>
</html>